<template>
    <view class="container">
        <!-- 训练计划标题 -->
        <view class="header">
            <text class="fs-40 fw-b">{{ trainData.train_title || '训练计划详情' }}</text>
        </view>

        <!-- 训练项目列表 -->
        <view class="train-list">
            <view class="train-item" v-for="(item, index) in trainData.train_list" :key="index">
                <view class="item-left">
                    <text class="fs-32">{{ item.video_title }}</text>
                </view>
                <view class="item-right">
                    <text
                        class="fs-28 text-gray"
                        v-if="item.train_status != 1"
                        @click="playTrainingVideo(item)"
                        >{{ `观看教学视频 >` }}</text
                    >
                    <text class="fs-28 text-gray" v-else>{{ `已完成训练 >` }}</text>
                </view>
            </view>
        </view>

        <!-- 加载状态 -->
        <view class="loading" v-if="isLoading">
            <uni-load-more status="loading"></uni-load-more>
        </view>

        <!-- 空状态 -->
        <view
            class="empty"
            v-if="
                !isLoading &&
                (!trainData || !trainData.train_list || trainData.train_list.length === 0)
            "
        >
            <view class="empty-icon-wrapper">
                <uni-icons type="videocam" size="70" color="#CCCCCC"></uni-icons>
            </view>
            <text class="fs-32 mt-20">暂无训练项目</text>
        </view>
    </view>
</template>

<script>
import { getTrainInfo } from '@/api/modules/common';

export default {
    data() {
        return {
            isLoading: false,
            trainData: {},
            trainId: null
        };
    },
    onLoad(options) {
        this.trainId = options.train_id;
    },
    onShow() {
        this.getTrainDetail();
    },
    methods: {
        // 获取训练详情
        async getTrainDetail() {
            this.isLoading = true;
            try {
                const { data } = await getTrainInfo({ train_id: this.trainId });
                this.trainData = data;
            } catch (error) {
                console.error('获取训练详情失败:', error);
                uni.showToast({
                    title: '获取训练详情失败',
                    icon: 'none'
                });
            } finally {
                this.isLoading = false;
            }
        },
        // 播放训练视频
        playTrainingVideo(item) {
            uni.setStorageSync('play_data', item);
            uni.navigateTo({
                url: '/pages/video/play'
            });
        }
    }
};
</script>

<style lang="scss">
.container {
    padding: 30rpx;
    min-height: 100vh;
    background-color: #f5f7fa;
}

.header {
    padding: 30rpx 0;
    border-bottom: 1px solid #eee;
}

.train-list {
    margin-top: 30rpx;
    background-color: #fff;
    border-radius: 20rpx;
    overflow: hidden;
}

.train-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1px solid #f5f5f5;

    &:last-child {
        border-bottom: none;
    }

    .item-left {
        display: flex;
        align-items: center;

        .item-icon {
            width: 60rpx;
            height: 60rpx;
            margin-right: 20rpx;
        }
    }

    .item-right {
        display: flex;
        align-items: center;

        .text-gray {
            color: #999;
        }

        .arrow-icon {
            width: 40rpx;
            height: 40rpx;
            margin-left: 10rpx;
        }
    }
}

.loading {
    padding: 50rpx 0;
    text-align: center;
}

.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100rpx 0;
    background-color: #fff;
    border-radius: 20rpx;
    margin-top: 30rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

    .empty-icon-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 160rpx;
        height: 160rpx;
        background-color: #f5f7fa;
        border-radius: 50%;
    }
}
</style>
